<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            widows: 250px;
            height: 250px;
        }
    </style>
</head>
<body>
    <div id="myApp">
        <p>喂，{{people}}?这里有人不听课！</p>
        <p>有{{stu.length}}个，有{{stu[5]}}</p>
        <P>他叫{{stuInfo.name}},是一个{{stuInfo.job}}</P>
        <input type="text" v-model="people">
        <p>{{time}}</p>
        <hr>
        <h2>{{msg}}</h2>
        <!--v-html指令，转换为HTML-->
        <h2 v-html="msg"></h2>   
        <!--v-once指令,之渲染一次-->           
        <h3 v-once>{{age}}</h3>
        <input type="text" v-model="age">
        <hr>
        <!--v-bind,缩写为"："-->  
        <img v-bind:src="'./img/'+age+'.jpg'" alt="">
        <a href="">{{str}}</a>
        <p :erwer="piter">777</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm=new Vue ({
            el:'#myApp',
            data: {
                age:1,
                msg:`<p style="color:red;">777</p>`,
                people:'警察叔叔',
                stu:[1,2,3,4,5,6,7],
                stuInfo:{
                    name:'jake',
                    job:'teacher',
                },
                isTrue:false,
                time:new Date(),//显示时间
                //pic:"./img/111.jpg",
                //pic2:"./img/333.jpg",
                //pic1:"./img/444.jpg",
                str:"xxx.html",
                piter:"er",
            },
            mounted() {
                console.log('mounted')
            },
            beforeMount() {
                console.log('beforeMount')  
            },
            beforeCreate() {
                console.log('beforeCreate')
            },
            destroyed() {
                console.log('destroyed')
            },
            updated() {
                console.log('updated')
            },
            beforeDestroy() {
                console.log('beforeDestroy')
            },
            beforeUpdate() {
                console.log('beforeUpdate')
                this.time=new Date()
                /*if (this.isTrue) {
                    this.pic=this.pic1;
                    this.isTrue=false;
                } else {
                    this.pic=this.pic2;
                    this.isTrue=true;  
                }
                if (this.age==18) {
                    this.pic=this.pic1;
                } else if(this.age==1) {
                    this.pic=this.pic2;
                }else if(this.age==2) {
                    this.pic='./img/222.jpg';
                }else if(this.age==3) {
                    this.pic='./img/111.jpg';
                }*/
            },
            created() {
                console.log('created')
            },
        })
    </script>
</body>
</html>